Improvement/scroll fade table by JeanMarcMilletScality · Pull Request #1072 · scality/core-ui

JeanMarcMilletScality · 2026-04-15T15:50:01Z

TL;DR

Tablev2 now shows a subtle bottom fade while its body scrolls — a cue that there's more content below — which auto-hides once you reach the end. Storybook is also wrapped in ScrollbarWrapper so the effect renders in stories.

Context

core-ui already ships a .scroll-fade CSS utility (in ScrollbarWrapper) that gives any scrollable element an auto-hiding bottom fade — but nothing applied it. This turns it on for tables, so long lists get a "more below" affordance instead of a hard-cut edge.

Screenshots

Left → right: today's hard-cut edge; the new bottom fade while scrolling (note FirstName9 softening at the edge); and the fade auto-hidden once the last row is reached. Chromium only — the effect is gated behind @supports (animation-timeline: scroll()), so Firefox/Safari stable render the table with no fade.

Review focus

🟡 tablev2/TableCommon.tsx › SmoothScrollDiv — the fade is applied to the shared virtualized scroll container, so it turns on for every Tablev2 table at once (not per-instance opt-in). Visual-only and it degrades gracefully: the effect is behind @supports (animation-timeline: scroll()), so Chromium shows the fade and Firefox/Safari stable simply render the table with no fade (no breakage). className is merged with any forwarded value (['scroll-fade', props.className].filter(Boolean).join(' ')) rather than replacing it, mirroring how style is already merged on the line above — so a future className from react-window's <List> isn't clobbered.
⚪ .storybook/preview.tsx — Storybook-only. Wraps stories in ScrollbarWrapper (which injects the @property/keyframes the utility needs); no effect on shipped code.

How to test

npm run storybook (port 3001).
Open a Tablev2 story with enough rows to overflow the body (Components → Data Display → Table).
Scroll the table body → a fade appears at the bottom edge; scroll to the very bottom → the fade disappears.
Non-Chromium check: in Firefox/Safari the table renders normally with no fade (expected — scroll-driven-animation feature gate).

bert-e · 2026-04-15T15:50:06Z

Hello jeanmarcmilletscality,

My role is to assist you with the merge of this
pull request. Please type @bert-e help to get information
on this process, or consult the user documentation.

Available options

name	description	privileged	authored
`/after_pull_request`	Wait for the given pull request id to be merged before continuing with the current one.
`/bypass_author_approval`	Bypass the pull request author's approval	⭐
`/bypass_build_status`	Bypass the build and test status	⭐
`/bypass_commit_size`	Bypass the check on the size of the changeset `TBA`	⭐
`/bypass_incompatible_branch`	Bypass the check on the source branch prefix	⭐
`/bypass_jira_check`	Bypass the Jira issue check	⭐
`/bypass_peer_approval`	Bypass the pull request peers' approval	⭐
`/bypass_leader_approval`	Bypass the pull request leaders' approval	⭐
`/approve`	Instruct Bert-E that the author has approved the pull request.		✍️
`/create_pull_requests`	Allow the creation of integration pull requests.
`/create_integration_branches`	Allow the creation of integration branches.
`/no_octopus`	Prevent Wall-E from doing any octopus merge and use multiple consecutive merge instead
`/unanimity`	Change review acceptance criteria from `one reviewer at least` to `all reviewers`
`/wait`	Instruct Bert-E not to run until further notice.

Available commands

name	description	privileged
`/help`	Print Bert-E's manual in the pull request.
`/status`	Print Bert-E's current status in the pull request `TBA`
`/clear`	Remove all comments from Bert-E from the history `TBA`
`/retry`	Re-start a fresh build `TBA`
`/build`	Re-start a fresh build `TBA`
`/force_reset`	Delete integration branches & pull requests, and restart merge process from the beginning.
`/reset`	Try to remove integration branches unless there are commits on them which do not appear on the source branch.

Status report is not available.

bert-e · 2026-04-15T15:50:12Z

Waiting for approval

The following approvals are needed before I can proceed with the merge:

the author
one peer

Peer approvals must include at least 1 approval from the following list:

bert-e · 2026-07-08T14:33:01Z

Waiting for approval

The following approvals are needed before I can proceed with the merge:

the author
one peer

Peer approvals must include at least 1 approval from the following list:

claude · 2026-07-08T14:35:55Z

    ref={ref}
    {...props}
    style={{ ...props.style, scrollBehavior: 'smooth' }}
+    className="scroll-fade"


className="scroll-fade" placed after {...props} silently overrides any className that react-window forwards to the outer element. FixedSizeList passes its own className prop through to outerElementType — currently the <List> here doesn't set one, but this will break silently if it ever does. Merge instead of replace, consistent with how style is already handled on the line above.

Suggested change

className="scroll-fade"

className={`scroll-fade${props.className ? ` ${props.className}` : ''}`}

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

bert-e · 2026-07-10T14:40:57Z

Waiting for approval

The following approvals are needed before I can proceed with the merge:

the author
one peer

Peer approvals must include at least 1 approval from the following list:

bert-e · 2026-07-13T09:33:52Z

Waiting for approval

The following approvals are needed before I can proceed with the merge:

the author
one peer

Peer approvals must include at least 1 approval from the following list:

bert-e · 2026-07-17T09:02:16Z

Conflict

There is a conflict between your branch improvement/scroll-fade-table and the
destination branch development/1.0.

Please resolve the conflict on the feature branch (improvement/scroll-fade-table).

git fetch && \
git checkout origin/improvement/scroll-fade-table && \
git merge origin/development/1.0

Resolve merge conflicts and commit

git push origin HEAD:improvement/scroll-fade-table

…t/scroll-fade-table # Conflicts: # .storybook/preview.tsx

bert-e · 2026-07-17T09:12:22Z

Waiting for approval

The following approvals are needed before I can proceed with the merge:

the author
one peer

Peer approvals must include at least 1 approval from the following list:

JeanMarcMilletScality · 2026-07-17T12:59:15Z

/approve

bert-e · 2026-07-17T12:59:27Z

I have successfully merged the changeset of this pull request
into targetted development branches:

✔️ development/1.0

Please check the status of the associated issue None.

Goodbye jeanmarcmilletscality.

The following options are set: approve

JeanMarcMilletScality force-pushed the improvement/scroll-fade-table branch from 9a92fd0 to ac9e2e5 Compare July 8, 2026 14:32

claude Bot reviewed Jul 8, 2026

View reviewed changes

JeanMarcMilletScality and others added 2 commits July 8, 2026 16:40

feat(Table): apply scroll-fade to virtualized body

9ecc769

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

feat(Storybook): add ScrollbarWrapper to global preview decorator

0180bfa

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

JeanMarcMilletScality force-pushed the improvement/scroll-fade-table branch from ac9e2e5 to 0180bfa Compare July 8, 2026 14:41

JeanMarcMilletScality marked this pull request as ready for review July 13, 2026 09:33

Merge remote-tracking branch 'origin/development/1.0' into improvemen…

9326f02

…t/scroll-fade-table # Conflicts: # .storybook/preview.tsx

JBWatenbergScality approved these changes Jul 17, 2026

View reviewed changes

bert-e merged commit 9326f02 into development/1.0 Jul 17, 2026
8 checks passed

JeanMarcMilletScality mentioned this pull request Jul 24, 2026

feat(tablev2): allow opting out of the body scroll fade #1169

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Improvement/scroll fade table - #1072

Improvement/scroll fade table#1072
bert-e merged 3 commits into
development/1.0from
improvement/scroll-fade-table

JeanMarcMilletScality commented Apr 15, 2026 •

edited

Loading

Uh oh!

bert-e commented Apr 15, 2026

Uh oh!

bert-e commented Apr 15, 2026

Uh oh!

bert-e commented Jul 8, 2026

Uh oh!

claude Bot Jul 8, 2026

Uh oh!

bert-e commented Jul 10, 2026

Uh oh!

bert-e commented Jul 13, 2026

Uh oh!

bert-e commented Jul 17, 2026

Uh oh!

bert-e commented Jul 17, 2026

Uh oh!

JeanMarcMilletScality commented Jul 17, 2026

Uh oh!

Uh oh!

bert-e commented Jul 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	className="scroll-fade"
	className={`scroll-fade${props.className ? ` ${props.className}` : ''}`}

Uh oh!

Conversation

JeanMarcMilletScality commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

TL;DR

Context

Screenshots

Review focus

How to test

Uh oh!

bert-e commented Apr 15, 2026

Hello jeanmarcmilletscality,

Uh oh!

bert-e commented Apr 15, 2026

Waiting for approval

Uh oh!

bert-e commented Jul 8, 2026

Waiting for approval

Uh oh!

claude Bot Jul 8, 2026

Choose a reason for hiding this comment

Uh oh!

bert-e commented Jul 10, 2026

Waiting for approval

Uh oh!

bert-e commented Jul 13, 2026

Waiting for approval

Uh oh!

bert-e commented Jul 17, 2026

Conflict

Uh oh!

bert-e commented Jul 17, 2026

Waiting for approval

Uh oh!

JeanMarcMilletScality commented Jul 17, 2026

Uh oh!

Uh oh!

bert-e commented Jul 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

JeanMarcMilletScality commented Apr 15, 2026 •

edited

Loading